<template>
  <div>
    <CityHeader/>
    <Search :cities = "cities"/>
    <List :cities = "cities" :hotCities="hotCities" :letter="letter"/>
    <Alphabet :cities = "cities" @change="handleLetterChange"/>
  </div>
</template>

<script>
import axios from 'axios';
import CityHeader from '@/pages/city/componens/CityHeader';
import Search from '@/pages/city/componens/Search';
import List from '@/pages/city/componens/List';
import Alphabet from '@/pages/city/componens/Alphabet';
export default {
  name: 'City',
  components: {
    CityHeader,
    Search,
    List,
    Alphabet
  },
  data () {
    return {
      cities: {},
      hotCities: [],
      letter: ''
    };
  },
  mounted () {
    this.getCityInfo();
  },
  methods: {
    getCityInfo () {
      axios.get('/api/city.json')
        .then((res) => {
          // console.log(res);
          let data = res.data;
          if (data.ret && data.data) {
            this.cities = data.data.cities;
            this.hotCities = data.data.hotCities;
          }
        });
    },
    handleLetterChange (letter) {
      this.letter = letter;
    }
  }

};
</script>

<style lang="stylus" scoped>

</style>
